import PropTypes from 'prop-types';
import PureRenderMixin from "react-addons-pure-render-mixin"
import React, {Component} from 'react';

import T from 'utils/T';

import Carousel from './carousel';
import './index.scss';

import img1 from './img/1.jpg';
import img2 from './img/2.jpg';
import img3 from './img/3.jpg';

@T.decorator.propTypes({
    data: PropTypes.array,
    options: PropTypes.object
})
export default class Carousel3d extends Component {

    constructor(props) {
        super(props);

        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.chart = null;
    }

    componentDidMount() {
        this.isDraw();
    }

    isDraw(){
        if(this.carouselBox){
            this.drawCarousel();
        }
    }

    drawCarousel(){
        let {data, options} = this.props;
        // $(this.carousel).find('.carousel').carousel({curDisplay: 0, autoPlay: true, interval: 2000});

        const self  = this;
        this.Carousel = new Carousel($(self.carouselBox), {
            curDisplay: 0,
            autoPlay: true,
            interval: 2000
        });


    }

    componentWillUnmount() {
        clearInterval(this.Carousel.timer);
    }

    render() {

        return (
            <div className={'carousel3dTemp_box'} ref={carouselBox => (this.carouselBox = carouselBox)}>
                <div className={'carousel'} ref={carousel => (this.carousel = carousel)}>
                    <img src={img1} data-url="" alt=""/>
                    <img src={img2} data-url="" alt=""/>
                    <img src={img3} data-url="" alt=""/>
                    <img src={img1} data-url="" alt=""/>
                    <img src={img2} data-url="" alt=""/>
                    <img src={img3} data-url="" alt=""/>
                    <img src={img1} data-url="" alt=""/>
                    <img src={img2} data-url="" alt=""/>
                    <img src={img3} data-url="" alt=""/>
                </div>
            </div>
        )
    }
}
